<template>
  <a-select
    :bordered="bordered"
    :size="size"
    :mode="model"
    class="width-max"
    v-model:value="selectValue"
    @change="onChange"
    show-arrow
    allow-clear
    placeholder="请选择成员"
  >
    <a-select-option v-for="item in store.members" :value="item.id" >
      <a-flex align="center">
        <a-avatar :src="item.avatar" :size="20"/>
        <span class="margin-left-sm">{{item.username}}</span>
      </a-flex>
    </a-select-option>
  </a-select>
</template>

<script setup lang="ts">
import {onMounted} from "vue";
import {useMemberStore} from "@/store/member";
type ModelType = 'multiple'|'default'|'tags'
type SizeType = 'small'|'middle'|'large'
defineProps({
  model:{type:String as ()=>ModelType,default:'default'},
  size:{type:String as ()=>SizeType,default:'middle'},
  value:{type:Array|String|Number,default:undefined},
  bordered:{type:Boolean,default:true}
})
const selectValue = defineModel<string|number|Array<string|number>|undefined>()

const store = useMemberStore()

onMounted(()=>{
  store.getMembers()
})
const onChange = (val:any)=>{
  selectValue.value = val
}
</script>

<style scoped>

</style>